 <template>
  <div>
    <!-- <div class="head" @click="showProblem = true">
      <span v-if="!form.typeName">请选择咨询类型</span>
      <span v-else>{{form.typeName}}</span>
      <van-icon name="arrow-down" />
    </div> -->
    <div style="background: #fff; padding: 10px 20px">
      <p class="col-333 font-15" style="margin-bottom: 5px">商品评分</p>
      <div class="score">
        <van-rate v-model="form.score" :size="26" color="#ffd21e" void-icon="star" void-color="#eee" />
        <p>请选择评分（满意请选择五星！）</p>
      </div>
    </div>

    <div class="replyMessage">
      <p>填写评价</p>
      <van-field
        v-model="form.content"
        class="question"
        name="content"
        rows="4"
        autosize
        type="textarea"
        maxlength="500"
        input-align="left"
        placeholder="宝贝是否满足了你的期待？说说你的使用心得分享给其他想购买的朋友吧～"
      />
      <div class="spacing" />
      <div style="background: #fff; padding: 10px 20px">
        <p class="col-333 font-15" style="margin-bottom: 5px">评价晒单</p>
        <upload-img v-model="fileInfoList" :maxCount="2" :isDetails="false"></upload-img>
        <div class="tip">注：支持格式JPG、JPEG、PNG，最多上传2张照片，单个不超 过5M。</div>
      </div>
    </div>
    <div class="add-btn">
      <van-button
        block
        type="info"
        color="#37B5B5"
        style="width: 85%; margin: 45px auto"
        @click="onSave"
        size="large"
        :loading="loading"
        loading-text="提交中..."
        >保存</van-button
      >
    </div>
    <!-- <van-popup v-model="showProblem" position="bottom">
      <van-picker
        title="选择类型"
        show-toolbar
        :columns="problemList"
        @confirm="problemSave"
        @cancel="showProblem = false"
        value-key="label"
      />
    </van-popup> -->
  </div>
</template>
<script>
import { Dialog, Toast, Icon, Cell, Picker, Popup, Field, Button, Rate } from 'vant'
import { getValue } from '@/utils/auth'
import UploadImg from '../../components/uploadImg'
import { postHandle } from '@/api'

export default {
  components: {
    [Icon.name]: Icon,
    [Toast.name]: Toast,
    [Cell.name]: Cell,
    [Picker.name]: Picker,
    [Popup.name]: Popup,
    [Button.name]: Button,
    [Dialog.Component.name]: Dialog.Component,
    [Dialog.name]: Dialog,
    [Field.name]: Field,
    [Rate.name]: Rate,
    UploadImg
  },
  data() {
    return {
      showProblem: false,
      problemList: [],
      fileInfoList: [],
      form: {
        content: '', // 问题内容
        imgs: '', // 问题图片
        score: '',
        recordId: getValue('shopInfo-view-id'),
        recordName: getValue('shopInfo-view-content'),
        loginUserId: getValue('loginUserId'),
        type: 1
      },
      loading: false
    }
  },

  created() {},
  methods: {
    onSave() {
      if (!this.form.content) {
        Toast('请填写评价内容')
        return
      }
      if (!this.form.score) {
        Toast('请选择评分')
        return
      }
      this.loading = true

      var str = ''
      if (this.fileInfoList) {
        for (var i = 0; i < this.fileInfoList.length; i++) {
          str += this.fileInfoList[i].baseUrl + ','
        }
      }
      if (str.length > 0) {
        this.form.imgs = str.substr(0, str.length - 1)
      }

      postHandle('/agri/api/common/evaluateInfo/save', this.form).then(res => {
        this.loading = false

        Toast(res.msg)

        this.$bridge.call('base.closePage')
      })
    }
  }
}
</script>
<style lang="scss" scoped>
::v-deep .van-rate {
  width: 55%;
  display: flex;
  justify-content: space-between;
}
.score {
  display: flex;
  flex-direction: column;
  align-items: center;
  > p {
    font-size: 12px;
    font-weight: 400;
    color: #666666;
    line-height: 30px;
  }
}
.van-cell::after {
  border-bottom: 1px solid #fff;
}
.question {
  padding: 5px 16px;
  margin-bottom: -2px;
}
::v-deep .van-field__body {
  border: 1px solid #eeeeee;
  padding: 8px;
  border-radius: 4px;
}
textarea {
  background-color: #f7f7f7;
}
.box {
  width: 100vw;
  height: 100vh;
  padding: 20px;
  box-sizing: border-box;
  background-color: #fff;
  .head {
    border: 1px solid #dddddd;
    box-sizing: border-box;
    border-radius: 2px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 5px;
  }
  .title {
    padding: 15px 0;
    font-size: 15px;
    color: #333333;
  }
  textarea {
    width: 100%;
    height: 200px;
    padding: 20px;
    background-color: #dddddd;
    box-sizing: border-box;
  }
}
.add-btn {
  padding-bottom: 20px;
}
.replyMessage {
  margin-top: 10px;
  background-color: #fff;
  > p {
    padding: 10px 16px 5px;
    color: #333333;
    font-size: 15px;
  }
}
.tip {
  color: #999999;
  font-size: 12px;
  margin-top: 6px;
}
</style>
